<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>品优购，优质！优质！-购物车</title>
    <link rel="stylesheet" type="text/css" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="header_con">
    <div class="header">
        <div class="welcome fl">欢迎来到品优购生鲜!</div>
        <div class="fr">
            <div class="login_info fl">
                欢迎您：<em>张 山</em>
            </div>
            <div class="login_btn fl">
                <a href="login.html">登录</a>
                <span>|</span>
                <a href="register.html">注册</a>
            </div>
            <div class="user_link fl">
                <span>|</span>
                <a href="user_center_info.html">用户中心</a>
                <span>|</span>
                <a href="/user/showCart">我的购物车</a>
                <span>|</span>
                <a href="user_center_order.html">我的订单</a>
            </div>
        </div>
    </div>
</div>

<div class="search_bar clearfix">
    <a href="index.html" class="logo fl"><img src="../static/images/logo.png"></a>
    <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
    <div class="search_con fr">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品">
        <input type="button" class="input_btn fr" name="" value="搜索">
    </div>
</div>

<div class="total_count">全部商品<em>{{.totalCount}}</em>件</div>
<ul class="cart_list_th clearfix">
    <li class="col01">商品名称</li>
    <li class="col02">商品单位</li>
    <li class="col03">商品价格</li>
    <li class="col04">数量</li>
    <li class="col05">小计</li>
    <li class="col06">操作</li>
</ul>
<form action="/user/addOrder" method="post">
    {{range .goods}}
    <ul class="cart_list_td clearfix">
        {{/*form表单中,如果input类型是checkbox,提交表单时将只提交选中的checkbox的value值*/}}
        <li class="col01"><input type="checkbox" class="checkGoods" name="goodsIds" checked value="{{.goodsSKU.Id}}"></li>
        <li class="col02"><img src="http://192.168.11.77:8888/{{.goodsSKU.Image}}"></li>
        <li class="col03">{{.goodsSKU.Name}}<br><em>{{.goodsSKU.Price}}元/{{.goodsSKU.Unite}}g</em></li>
        <li class="col04">{{.goodsSKU.Unite}}g</li>
        <li class="col05">{{.goodsSKU.Price}}元</li>
        <li class="col06">
            <div class="num_add">
                <a href="javascript:;" class="add fl">+</a>
                <input type="text" class="num_show fl" value="{{.count}}" goodsId="{{.goodsSKU.Id}}">
                <a href="javascript:;" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{.littlePrice}}元</li>
        <li class="col08"><a href="/deleteCart?id={{.goodsSKU.Id}}" class="dels">删除</a></li>
    </ul>
    {{end}}

    <ul class="settlements">
        <li class="col01"><input type="checkbox" name="" checked="" id="allCheck"></li>
        <li class="col02">全选</li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{.totalPrice}}</em><br>共计<b>{{.totalCount}}</b>件商品</li>
        <li class="col04"><input type="submit" value="去结算"/></li>
    </ul>
</form>
<div class="py-container copyright footer">
    <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机品优购</li>
        <li>销售联盟</li>
        <li>品优购社区</li>
    </ul>
    <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
    <div class="beian">京ICP备08001421号京公网安备110108007702
    </div>
</div>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    //全选设置
    $("#allCheck").change(function () {
        //如果改变,把上面所有的复选框设置成和当前复选框一个状态
        checked = $(this).prop("checked")
        //获取上面所有的复选框 :checkbox
        $(".cart_list_td").find(":checkbox").each(function () {
            //设置所有复选框状态
            $(this).prop("checked", checked)
        })
        //调用函数计算总价和总件数
        CalcTotalPrice()
    });

    // 一个复选框对所有复选框的影响
    $(".checkGoods").change(function () {
        //改变之后,查看当前状态是否是选中状态
        //查询所有复选框
        allCount = $(".cart_list_td").find(":checkbox").length
        //查询所有被选中的复选框
        checkedCount = $('.cart_list_td').find(":checked").length
        //比较两者
        if (allCount == checkedCount) {
            $("#allCheck").prop("checked", "checked")
        } else {
            $("#allCheck").prop("checked", "")
        }
        //调用函数,计算总价和总件数
        CalcTotalPrice()
    });

    //计算总价和总件数
    function CalcTotalPrice() {
        //获取选中的复选框所在行的小计
        var totalPrice = 0
        $(".cart_list_td").find(":checked").each(function () {
            //获取选中的复选框所在行的小计
            littlePrice = $(this).parents(".cart_list_td").find(".col07").text()    //注意:parent和parents的区别
            //计算总价
            totalPrice += parseInt(littlePrice)
        });
        //把总价放回显示总价的地方
        $(".settlements").children(".col03").find("em").text(totalPrice.toFixed(2) + "元")
        //查询所有被选中的复选框
        checkedCount = $(".cart_list_td").find(":checked").length
        //把总件数放回显示的地方
        $(".settlements").children(".col03").find("b").text(checkedCount)
        $(".total_count").children("em").text(checkedCount)
    }

    //调用函数计算总价和总件数
    CalcTotalPrice()

    //修改购物车数量,包括:+,-,直接在输入框输入
    //添加购物车商品数量
    $(".add").click(function () {
        //查询输入框的值
        count = $(this).next().val()
        //没点一次加1
        count = parseInt(count) + 1
        //获取自定义的属性
        goodsId = $(this).next().attr("goodsId")
        //定义json参数
        param = {"count": count, "goodsId": goodsId}
        //发送ajax请求到后台,用来修改redis中数据
        //添加表示判断后台是否更新成功
        isUpdate = false
        //设置ajax异步状态,默认是异步,设置为同步
        $.ajaxSettings.async = false
        $.post("/changeCartCount", param, function (data) {
            if (data.errno != 5) {
                alert(data.errmsg)
            } else {
                isUpdate = true
            }
        })
        //用完之后还原为异步
        $.ajaxSettings.async = true
        //判断后台是否更新成功,更新成功,则修改页面值
        if (isUpdate) {
            $(this).next().val(count)
            //计算小计
            price = $(this).parents("ul").children(".col05").text()
            littlePrice = parseFloat(price) * count
            $(this).parents("ul").children(".col07").text(littlePrice + "元")

            //调用函数计算总价和总件数
            CalcTotalPrice()
        }
    });

    //减少购物车商品数量
    $(".minus").click(function () {
        //查询输入框的值
        count = $(this).prev().val()
        //每点一次减1
        count = parseInt(count) - 1
        //判断范围
        if (count <= 1) {
            count = 1
        }
        //获取自定义的属性
        goodsId = $(this).prev().attr("goodsId")
        //定义json参数
        param = {"count": count, "goodsId": goodsId}
        //发送ajax请求到后台,用来修改redis中数据
        //添加表示判断后台是否更新成功
        isUpdate = false
        //设置ajax异步状态,默认是异步,设置为同步
        $.ajaxSettings.async = false
        $.post("/changeCartCount", param, function (data) {
            if (data.errno != 5) {
                alert(data.errmsg)
            } else {
                isUpdate = true
            }
        })
        //用完之后还原为异步
        $.ajaxSettings.async = true
        //判断后台是否更新成功,更新成功,则修改页面值
        if (isUpdate) {
            $(this).prev().val(count)
            //计算小计
            price = $(this).parents("ul").children(".col05").text()
            littlePrice = parseFloat(price) * count
            $(this).parents("ul").children(".col07").text(littlePrice + "元")

            //调用函数计算总价和总件数
            CalcTotalPrice()
        }
    });

    //直接在输入框输入修改购物车数量
    //获取输入前的数量,获得焦点事件
    var initialCount = 0
    $(".num_show").focus(function () {
        initialCount = $(this).val()
    });
    //设置修改后的数量,失去焦点事件
    $(".num_show").blur(function () {
        count = $(this).val()
        //判断输入的值是否合法,是否是数字,是否是空格,是否时负数
        if (isNaN(count) || count.trim().length ==0 || parseInt(count)<=0){
            //注意:如果不合法,则还原为修改前的数量
            $(this).val(initialCount)
            return
        }
        goodsId = $(this).attr("goodsId")
        //定义json参数
        param = {"count": count, "goodsId": goodsId}
        //发送ajax请求到后台,用来修改redis中数据
        //添加表示判断后台是否更新成功
        isUpdate = false
        //设置ajax异步状态,默认是异步,设置为同步
        $.ajaxSettings.async = false
        $.post("/changeCartCount", param, function (data) {
            if (data.errno != 5) {
                alert(data.errmsg)
            } else {
                isUpdate = true
            }
        })
        //用完之后还原为异步
        $.ajaxSettings.async = true
        //判断后台是否更新成功,更新成功,则修改页面值
        if (isUpdate) {
            $(this).val(count)
            //计算小计
            price = $(this).parents("ul").children(".col05").text()
            littlePrice = parseFloat(price) * count
            $(this).parents("ul").children(".col07").text(littlePrice + "元")

            //调用函数计算总价和总件数
            CalcTotalPrice()
        }
    });


    //删除购物车商品
    $(".dels").click(function () {
        if (!confirm("是否要删除次商品?")){
            return false
        }
    });

</script>
</body>
</html>